import React, { useState, useEffect } from 'react'
import apiService from '../utils/api.js'

/**
 * 歌曲卡片组件
 * @param {Object} props - 组件属性
 * @param {Object} props.song - 歌曲数据对象
 * @param {Function} props.onClick - 点击卡片时的回调函数
 * @param {Function} props.onAddToPlaylist - 添加到歌单的回调函数（可选）
 * @param {string} props.className - 自定义CSS类名（可选）
 */
function SongCard({ song, onClick, onAddToPlaylist, className = '' }) {
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)

  // 初始化时检查用户登录状态
  useEffect(() => {
    checkLoginStatus()
  }, [])

  // 检查用户登录状态
  const checkLoginStatus = () => {
    const loggedIn = apiService.isLoggedIn()
    setIsUserLoggedIn(loggedIn)
  }
  // 处理卡片点击事件
  const handleCardClick = (e) => {
    // 如果点击的是添加到歌单按钮，不触发播放
    if (e.target.closest('.btn-add-to-playlist')) {
      return
    }
    onClick(song)
  }

  // 处理添加到歌单按钮点击事件
  const handleAddToPlaylist = (e) => {
    e.stopPropagation() // 阻止事件冒泡到卡片
    if (onAddToPlaylist) {
      onAddToPlaylist(song)
    }
  }

  return (
    <div 
      className={`song-card ${className}`}
      onClick={handleCardClick}
    >
      {/* 只有在用户登录且提供了onAddToPlaylist回调的情况下才显示添加到歌单按钮 */}
      {isUserLoggedIn && onAddToPlaylist && (
        <button 
          className="btn-add-to-playlist"
          onClick={handleAddToPlaylist}
          title="添加到歌单"
        >
          +
        </button>
      )}
      <img 
        src={song.cover || song.coverImageUrl} 
        alt={`${song.title} - ${song.artist.name}`} 
        className="song-card-cover"
      />
      <div className="song-info">
        <h3 className="song-title">{song.title}</h3>
        <p className="song-artist">{song.artist.name}</p>
      </div>
    </div>
  )
}

export default SongCard